/*
 * @Description: 行驶证与车辆 DrivingLicenseVehicle
 * @version: 
 * @Company: 
 * @Author: ZhengZhuang
 * @Date: 2019-08-24 11:54:49
 * @LastEditors: zhengzhuang
 * @LastEditTime: 2020-11-18 09:20:51
 */
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:C20Driver/provider/driver_information.dart';
import 'package:C20Driver/service/request.dart';
import 'package:C20Driver/utils/utils.dart';
import 'package:provider/provider.dart';

class DrivingLicenseVehicle extends StatefulWidget {
  @override
  _DrivingLicenseVehicleState createState() => _DrivingLicenseVehicleState();
}

class _DrivingLicenseVehicleState extends State<DrivingLicenseVehicle> {
  TextEditingController _brandController = TextEditingController();
  TextEditingController _vehicleController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _brandController.addListener(() {
      Provider.of<DriverInformation>(context, listen: false)
          .setDriverInformation(brandModels: _brandController.text);
    });
    _vehicleController.addListener(() {
      Provider.of<DriverInformation>(context, listen: false)
          .setDriverInformation(vehicleNumberPlate: _vehicleController.text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('行驶证与车辆'),
        elevation: 0,
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          // 触摸收起键盘
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          color: Color(0xffffffff),
          child: ListView(
            padding: EdgeInsets.only(
              left: ScreenUtil().setWidth(30.0),
              right: ScreenUtil().setWidth(30.0),
            ),
            children: <Widget>[
              SizedBox(height: ScreenUtil().setWidth(30.0)),
              // 上传行驶证照片
              _uploadIDCard(),
              SizedBox(height: ScreenUtil().setWidth(50.0)),
              Divider(
                color: Color(0xffcccccc),
                height: ScreenUtil().setWidth(1),
              ),
              SizedBox(height: ScreenUtil().setWidth(50.0)),
              // 上传车辆照片
              _vehiclePhotos(),
              SizedBox(height: ScreenUtil().setWidth(48.0)),
              Divider(
                color: Color(0xffcccccc),
                height: ScreenUtil().setWidth(1),
              ),
              // 填写车辆型号
              _fillInformation(),
              SizedBox(height: ScreenUtil().setWidth(50.0)),
              Offstage(
                offstage: Provider.of<DriverInformation>(context, listen: false)
                        .driverInfo
                        .vehicleMpdify !=
                    '0000',
                child: Text(
                  '请确认身份信息无误后提交',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(28.0),
                    color: Color(0xff3FB956),
                  ),
                ),
              ),
              SizedBox(height: ScreenUtil().setWidth(36.0)),
              Offstage(
                offstage: Provider.of<DriverInformation>(context, listen: false)
                        .driverInfo
                        .vehicleMpdify !=
                    '0000',
                child: MaterialButton(
                  color: Color(0xff3FB956),
                  elevation: 0,
                  disabledColor: Color.fromARGB(255, 188, 188, 188),
                  minWidth: ScreenUtil().setWidth(700.0),
                  height: ScreenUtil().setWidth(100.0),
                  textColor: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(
                    ScreenUtil().setWidth(50),
                  )),
                  child: Text(
                    '提交',
                    style: TextStyle(
                        fontSize: ScreenUtil().setSp(32.0),
                        fontWeight: FontWeight.w500),
                  ),
                  onPressed: () => Request.submitDrivingLicense(context),
                ),
              ),
              SizedBox(height: ScreenUtil().setWidth(80.0))
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _brandController.dispose();
    _vehicleController.dispose();
    super.dispose();
  }

  // 上传行驶证
  Widget _uploadIDCard() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: ScreenUtil().setWidth(8),
                  height: ScreenUtil().setWidth(28),
                  decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.circular(ScreenUtil().setWidth(4)),
                    color: Color(0xff3FB956),
                  ),
                ),
                SizedBox(width: ScreenUtil().setWidth(10)),
                Text(
                  '上传行驶证照片',
                  style: TextStyle(
                      color: Color(0xff333333),
                      fontSize: ScreenUtil().setSp(30),
                      fontWeight: FontWeight.w500),
                ),
              ],
            ),
            Container(
              alignment: Alignment.topLeft,
              child: Text(
                '照片仅用于行驶证认证',
                style: TextStyle(
                  color: Color(0xff999999),
                  fontSize: ScreenUtil().setSp(28.0),
                ),
              ),
            ),
          ],
        ),
        SizedBox(height: ScreenUtil().setWidth(48.0)),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            // 行驶证正面
            Consumer<DriverInformation>(builder: (context, state, child) {
              return _uploadedIDCard(
                  'assets/icon/frontDrivingLicense.png',
                  state.driverInfo.frontDrivingLicense,
                  'frontDrivingLicense',
                  state.driverInfo.vehicleMpdify);
            }),
            // 行驶证反面
            Consumer<DriverInformation>(builder: (context, state, child) {
              return _uploadedIDCard(
                  'assets/icon/backDrivingLicense.png',
                  state.driverInfo.backDrivingLicense,
                  'backDrivingLicense',
                  state.driverInfo.vehicleMpdify);
            }),
          ],
        ),
      ],
    );
  }

  // 上传的证件
  Widget _uploadedIDCard(cardFile, iDCard, frontOfImgIDCard, vehicleMpdify) {
    return InkWell(
        child: Container(
          width: ScreenUtil().setWidth(330.0),
          height: ScreenUtil().setWidth(210.0),
          decoration: BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(6.0),
          ),
          child: iDCard == null
              ? Image.asset(
                  cardFile,
                  width: ScreenUtil().setWidth(330.0),
                  height: ScreenUtil().setWidth(210.0),
                )
              : Stack(
                  children: <Widget>[
                    Image.network(
                      iDCard,
                      width: ScreenUtil().setWidth(330.0),
                      height: ScreenUtil().setWidth(210.0),
                    ),
                    Positioned(
                        bottom: 0,
                        left: 0,
                        child: Offstage(
                          offstage: vehicleMpdify != '0000',
                          child: Container(
                            alignment: Alignment.center,
                            width: ScreenUtil().setWidth(330.0),
                            height: ScreenUtil().setWidth(45.0),
                            decoration: BoxDecoration(
                              color: Color(0x99000000),
                              borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(6.0),
                                bottomRight: Radius.circular(6.0),
                              ),
                            ),
                            child: Text(
                              '上传成功 点击修改',
                              style: TextStyle(
                                color: Color(0xffffffff),
                                fontSize: ScreenUtil().setSp(22.0),
                              ),
                            ),
                          ),
                        )),
                  ],
                ),
        ),
        onTap: () {
          if (vehicleMpdify != '0000') return;
          Utils.imageUpload(context).then((value) {
            switch (frontOfImgIDCard) {
              case 'frontDrivingLicense': // 行驶证正面
                Provider.of<DriverInformation>(context, listen: false)
                    .setDriverInformation(frontDrivingLicense: value);
                break;
              case 'backDrivingLicense': // 行驶证背面
                Provider.of<DriverInformation>(context, listen: false)
                    .setDriverInformation(backDrivingLicense: value);
                break;
              default:
            }
          });
        });
  }

  // 上传车辆照片
  Widget _vehiclePhotos() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: ScreenUtil().setWidth(8),
                  height: ScreenUtil().setWidth(28),
                  decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.circular(ScreenUtil().setWidth(4)),
                    color: Color(0xff3FB956),
                  ),
                ),
                SizedBox(width: ScreenUtil().setWidth(10)),
                Text(
                  '拍照上传车辆照片',
                  style: TextStyle(
                      color: Color(0xff333333),
                      fontSize: ScreenUtil().setSp(30),
                      fontWeight: FontWeight.w500),
                ),
              ],
            ),
            Container(
              alignment: Alignment.topLeft,
              child: Text(
                '车辆前后左右各个方位五张图片',
                style: TextStyle(
                  color: Color(0xff999999),
                  fontSize: ScreenUtil().setSp(28.0),
                ),
              ),
            ),
          ],
        ),
        SizedBox(height: ScreenUtil().setWidth(30.0)),
        _photoListVehicles(),
      ],
    );
  }

  // 车辆照片列表
  Widget _photoListVehicles() {
    return Container(
      alignment: Alignment.topLeft,
      child: Wrap(
        spacing: ScreenUtil().setWidth(45.0), // 相邻之间的间隔
        runSpacing: ScreenUtil().setWidth(45.0), // 行间距
        alignment: WrapAlignment.start,
        children: <Widget>[
          Consumer<DriverInformation>(builder: (context, state, child) {
            List<String> _dataInfo = state.driverInfo.carImageList;
            if (_dataInfo.length != 0) {
              return Wrap(
                spacing: ScreenUtil().setWidth(45.0), // 相邻之间的间隔
                runSpacing: ScreenUtil().setWidth(45.0), // 行间距
                children: _dataInfo.map((item) {
                  return _carPhotosImage(item);
                }).toList(),
              );
            } else {
              return Container();
            }
          }),
          Offstage(
            offstage: Provider.of<DriverInformation>(context, listen: false)
                    .driverInfo
                    .vehicleMpdify !=
                '0000',
            child: _addImage(),
          ),
        ],
      ),
    );
  }

  // 车辆照片
  // 车辆照片
  Widget _carPhotosImage(item) {
    return Stack(
      children: <Widget>[
        Container(
          child: Stack(
            children: <Widget>[
              Image.network(
                item,
                width: ScreenUtil().setWidth(200.0),
                height: ScreenUtil().setWidth(200.0),
              ),
              Positioned(
                  top: 0,
                  right: 0,
                  child: Offstage(
                    offstage:
                        Provider.of<DriverInformation>(context, listen: false)
                                .driverInfo
                                .vehicleMpdify !=
                            '0000',
                    child: InkWell(
                      child: Image.asset(
                        'assets/icon/imageDelIcon.png',
                        width: ScreenUtil().setWidth(44.0),
                        height: ScreenUtil().setWidth(44.0),
                      ),
                      onTap: () =>
                          Provider.of<DriverInformation>(context, listen: false)
                              .delCarImage(item),
                    ),
                  )),
            ],
          ),
        ),
      ],
    );
  }

  // 添加图片
  Widget _addImage() {
    return InkWell(
      child: Container(
        width: ScreenUtil().setWidth(200.0),
        height: ScreenUtil().setWidth(200.0),
        decoration: BoxDecoration(
          color: Colors.transparent,
        ),
        child: Image.asset(
          'assets/icon/imagecaiup.png',
          width: ScreenUtil().setWidth(200.0),
          height: ScreenUtil().setWidth(200.0),
        ),
      ),
      onTap: () => Utils.imageUpload(context).then((value) {
        Provider.of<DriverInformation>(context, listen: false)
            .setVehiclePhotos(carImage: value);
      }),
    );
  }

  // 填写车辆型号
  Widget _fillInformation() {
    DriverInformation provider =
        Provider.of<DriverInformation>(context, listen: false);
    return Column(
      children: <Widget>[
        Container(
          child: TextField(
            textAlign: TextAlign.right,
            controller: _vehicleController,
            enabled: provider.driverInfo.vehicleMpdify == '0000',
            style: TextStyle(
                fontSize: ScreenUtil().setSp(32.0),
                color: Color(0xff333333)), //输入文本的样式
            decoration: InputDecoration(
              icon: Text(
                '车辆牌号',
                style: TextStyle(
                  color: Color(0xff333333),
                  fontSize: ScreenUtil().setSp(30),
                ),
              ),
              hintText: provider.driverInfo.vehicleNumberPlate != null &&
                      provider.driverInfo.vehicleNumberPlate.length > 0
                  ? provider.driverInfo.vehicleNumberPlate
                  : "请输入车辆牌号",
              hintStyle: TextStyle(
                fontSize: ScreenUtil().setSp(30),
                color: provider.driverInfo.vehicleNumberPlate != null &&
                        provider.driverInfo.vehicleNumberPlate.length > 0
                    ? Color(0xff333333)
                    : Color(0xffB5B5B5),
              ),
              border: InputBorder.none,
            ),
          ),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)),
            ),
          ),
          padding: EdgeInsets.only(
            bottom: ScreenUtil().setWidth(20),
            top: ScreenUtil().setWidth(20),
          ),
        ),
        Container(
          child: TextField(
            textAlign: TextAlign.right,
            controller: _brandController,
            enabled: provider.driverInfo.vehicleMpdify == '0000',
            style: TextStyle(
                fontSize: ScreenUtil().setSp(32.0),
                color: Color(0xff333333)), //输入文本的样式
            decoration: InputDecoration(
              icon: Text(
                '品牌车型',
                style: TextStyle(
                  color: Color(0xff333333),
                  fontSize: ScreenUtil().setSp(30),
                ),
              ),
              hintText: provider.driverInfo.brandModels != null &&
                      provider.driverInfo.brandModels.length > 0
                  ? provider.driverInfo.brandModels
                  : "请输入品牌车型",
              hintStyle: TextStyle(
                fontSize: ScreenUtil().setSp(30),
                color: provider.driverInfo.brandModels != null &&
                        provider.driverInfo.brandModels.length > 0
                    ? Color(0xff333333)
                    : Color(0xffB5B5B5),
              ),
              border: InputBorder.none,
            ),
          ),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)),
            ),
          ),
          padding: EdgeInsets.only(
            bottom: ScreenUtil().setWidth(20),
            top: ScreenUtil().setWidth(20),
          ),
        ),
      ],
    );
  }
}
